<template>
	<view>
		<view class="navbar padding-lr u-flex-y" :class="{'border': scrollH>=bgHeight}"
			:style="{height: `${statusBarH + navbarH + 2}px`, background: `rgba(255,255,255, ${scrollH*0.005})`}">
			<view :style="{height: `${statusBarH}px`}"></view>
			<view class="navbar__content u-flex u-flex-items-center" :style="{height: `${navbarH}px`}">
				<image class="user-state" :src="`/static/index/main_icon_${navIconColor}_out.png`" mode="aspectFit">
				</image>

				<view class="search-box u-flex u-flex-items-center u-flex-between margin-lr-sm"
					:style="{background: `rgba(
				 ${scrollH>50? '241,241,241,'+(scrollH*0.005):
				 scrollH<1? '255,255,255,0.1':
				 '255,255,255,'+(scrollH*0.005)})`}">
					<view class="search-left u-flex u-flex-items-center">
						<image class="search-icon margin-right-xs"
							:src="`/static/index/main_icon_${navIconColor}_search.png`"
							mode="aspectFit">
						</image>
						<text class="search-text" :class="{'color-333333': navIconColor == 'gray'}">
							绑定手机号收款
						</text>
					</view>

					<image class="search-icon right" :src="`/static/index/voice_search_${navIconColor}_icon.png`"
						mode="aspectFit"></image>
				</view>
				<image class="online" :src="`/static/index/main_icon_${navIconColor}_online_service.png`"
					mode="aspectFit"></image>
				<image class="plus-icon margin-left-sm" :src="`/static/index/main_icon_${navIconColor}_more.png`"
					mode="aspectFit">
				</image>
			</view>
		</view>
		<!-- <view class="bg-box"></view> -->
		<image class="bg-box" src="/static/index/large_home_top_bg.9.png" mode="aspectFit"></image>
		<view class="main rela">
			<view class="card abso u-flex u-flex-around u-flex-items-center">
				<col-img-text v-for="(item,index) in cards" :key="index"
					:imgPath="`/static/index/${item.icon}`" :text="item.title"
					:containerStyles="{color: '#1b1b1b',
					width: '130rpx',
					height: '146rpx',
					'font-size': '28rpx'}"
					:imgStyles="{width: '88rpx',
				height: '88rpx',
				'margin-bottom': '18rpx',}"
					@handleClick="cardClick(item.path)">
				</col-img-text>
			</view>
			<view class="menu padding-lr border-bottom bgcolor-ffffff">
				<view class="u-flex u-flex-wrap u-flex-around ">
					<col-img-text v-for="(item,index) in menus" :key="index"
						:imgPath="`/static/index/${item.icon}`" :text="item.title"
						:containerStyles="{color: '#1b1b1b',
						width: '130rpx',
						height: '180rpx',
						'font-size': '28rpx',
						'justify-content':'flex-end'
						}"
						:imgStyles="{width: item.icon == 'yst.png'? '66rpx': '75rpx',
						height: item.icon == 'yst.png'? '66rpx': '75rpx',
					'margin-bottom': item.icon == 'yst.png'? '18rpx': '18rpx',}">
					</col-img-text>
				</view>
				<swiper-spot-bar :nums="3"></swiper-spot-bar>
			</view>
			<view class="notice padding-lr-lg padding-tb-sm border-bottom u-flex u-flex-items-center bgcolor-ffffff">
				<image class="notice__icon margin-right" src="/static/index/home_icon_notice.png"
					mode="aspectFit">
					<view class="u-flex u-flex-items-center">
						<image class="new-icon margin-right-sm" src="/static/index/new_notice.png" mode="aspectFit">
							<u--text :lines="1" text="中国邮政储蓄银行关于二十四节气（光明的故事）金银纪念币第二批销售的公告"></u--text>
					</view>
			</view>
			<view class="ad rela padding-lr-lg padding-top-sm border-bottom bgcolor-ffffff">
				<image class="ad__img" src="/static/index/main_ad_01.png" mode="scaleToFill">
					<view class="ad__text abso bgcolor-ffffff">
						广告
					</view>
					<swiper-spot-bar :contStyles="{height: '16rpx'}"></swiper-spot-bar>
			</view>
			<view class="content padding-lr-lg">
				<view class="content__title u-flex u-flex-items-center u-flex-between">
					<view class="line-title u-flex u-flex-items-center">
						<image class="line-img" src="/static/common/green_rectangle.png" mode="aspectFit">
							理财推荐
					</view>
					<text class="title-right">
						更多
					</text>
				</view>
				<view class="licai margin-top-sm ">
					<view class="licai-container rela bg-full-style">
						<view class="licai-top u-flex u-flex-items-center u-flex-between">
							<image class="title-img abso" src="/static/index/zylc.png" mode="aspectFit">
								<view class="licai-content u-flex-y u-flex-items-top">
									<text class="title">鸿锦一年定开71号新客优享A</text>
									<text class="desc margin-top-sm">业绩比较基准 4.05%~4.45%</text>
								</view>
								<view class="buy bg-full-style u-flex u-flex-items-center u-flex-center color-ffffff">
									立即购买
								</view>
						</view>
						<view class="licai-bottom text-center">
							业绩比较基准综合投资范围、策略和市场环境等测算
						</view>
					</view>
					<swiper-spot-bar :nums="3"></swiper-spot-bar>

				</view>
			</view>
			<view class="content padding-lr-lg">
				<view class="content__title u-flex u-flex-items-center u-flex-between">
					<view class="line-title u-flex u-flex-items-center">
						<image class="line-img" src="/static/common/green_rectangle.png" mode="aspectFit">
							基金推荐
					</view>
					<text class="title-right">
						更多
					</text>
				</view>
				<view class="jijin u-flex u-flex-items-center margin-top">
					<view class="jijin__item u-flex-y u-flex-around padding-sm bgcolor-ffffff"
						v-for="item,index in jijin" :key="index">
						<view class="title">
							{{item.title}}
						</view>
						<view class="type">
							{{item.type}}
						</view>
						<view class="nums">
							{{item.nums}} <text>%</text>
						</view>
						<view class="zf">
							{{item.zf}}
						</view>
					</view>
				</view>
			</view>
			<view class="content padding-lr-lg">
				<view class="content__title u-flex u-flex-items-center u-flex-between">
					<view class="line-title u-flex u-flex-items-center">
						<image class="line-img" src="/static/common/green_rectangle.png" mode="aspectFit">
							贷款推荐
					</view>
					<text class="title-right">
						更多
					</text>
				</view>
				<view class="daikuan u-flex u-flex-items-center margin-top">
					<view class="daikuan__item u-flex-y u-flex-between padding-tb-sm padding-left-sm bgcolor-ffffff"
						v-for="item,index in daikuan" :key="index">
						<view class="u-flex-y">
							<view class="title margin-bottom-sm">
								{{item.title}}
							</view>
							<view class="desc u-flex-y">
								<text class="desc1">
									{{item.desc1}}
								</text>
								<text class="desc2">
									{{item.desc2}}
								</text>
							</view>
						</view>
						<view class="">
							<view class="nums">
								{{item.nums}}万
							</view>
							<view class="zf">
								{{item.zf}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="main__bottom color-theme u-flex u-flex-items-center u-flex-center">
				<image class="add-icon" src="/static/index/home_add_icon.png" mode="aspectFit">
					定制我的专区
			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef APP-PLUS
	import tabbrNative from '@/common/sdk/tabbarNative.js';
	// #endif
	import { LOCATION } from '@/common/data/Enum.js';
	import storage from '@/common/util/Storage.js';
	export default {
		data() {
			return {
				showCardModal: false,
				statusBarH: this.$StatusBarHeight,
				navbarH: this.$NavBarHeight,
				location: storage.getStorageSync(LOCATION) || '福州市',
				form: {
					cardNumber: '',
					network: '',
					openingTime: ''
				},
				cards: [
				{
					title: '我的账户',
					icon: 'new_home_icon_account.png',
					path: 'account'
				},
				{
					title: '转账汇款',
					icon: 'new_home_icon_smart_transfer.png',
					path: 'transfer-account'
					// path: ''
				},
				{
					title: '财富一览',
					icon: 'new_home_icon_overview.png',
					path: ''
				},
				{
					title: '贷款',
					icon: 'new_home_icon_loan.png',
					path: ''
				}],
				menus: [
				{
					title: '理财',
					icon: 'lc.png'
				},
				{
					title: '财富一览',
					icon: 'cfyl.png'
				},
				{
					title: '邮政汇兑',
					icon: 'yzhd.png'
				},
				{
					title: '邮食堂',
					icon: 'yst.png'
				},
				{
					title: '付款码',
					icon: 'fkm.png'
				},
				{
					title: '一键绑卡',
					icon: 'yjbk.png'
				},
				{
					title: '邮乐商城',
					icon: 'yl.png'
				},
				{
					title: 'ATM交易',
					icon: 'atm.png'
				},
				{
					title: '明细查询',
					icon: 'mxcx.png'
				},
				{
					title: '全部',
					icon: 'all.png'
				}, ],
				jijin: [
				{
					title: '广发睿毅领先混合A',
					type: '混合型',
					nums: '5.74',
					zf: '年涨幅'
				},
				{
					title: '工银战略转型股票A',
					type: '股票型',
					nums: '7.05',
					zf: '年涨幅'
				},
				{
					title: '博时稳健回报A',
					type: '债券型',
					nums: '3.64',
					zf: '年涨幅'
				}],
				daikuan: [
				{
					title: '邮享贷-薪客专享',
					desc1: '工薪专享\n\r 利率优惠',
					desc2: '年化利率\n\r 4.35%-14.63%\n\r（单利）',
					nums: '20',
					zf: '最高'
				},
				{
					title: '小额极速贷',
					desc1: '额度高，审批快\n\r纯线上支用',
					desc2: '年化单利低至LPR基准',
					nums: '1000',
					zf: '最高'
				},
				{
					title: '邮享贷-高额质享',
					desc1: '消费用途\n\r年化利率低至LPR基准（单利）',
					desc2: '',
					nums: '500',
					zf: '最高'
				}],
				scrollH: 0,
				bgHeight: uni.upx2px(450)
			};
		},
		computed: {
			navIconColor() {
				return this.scrollH > 1 ? 'gray' : 'white';
			}
		},
		onLoad() {
			// this.themeColor = this.$ThemeColor
			this.statusBarH = this.$StatusBarHeight;
			this.navbarH = this.$NavBarHeight;
			this.bgHeight -= this.statusBarH + this.navbarH;
		},
		onReady() {
			// #ifdef APP-PLUS
			tabbrNative.viewShow();
			// #endif
			console.debug('onReady', );
		},
		onShow() {
			// #ifdef APP-PLUS
			tabbrNative.viewShow();
			// #endif
			this.initUserinfo();
		},
		// #ifdef APP-PLUS
		onHide() {
			tabbrNative.viewHide();
		},
		// #endif
		onPageScroll(res) {
			this.scrollH = res.scrollTop;
		},
		methods: {
			cardClick(name) {
				if (name) {
					this.$Router.push({
						name
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.navbar {
		position: fixed;
		z-index: 1;
		width: 100%;
		color: #fff;

		&.border {
			border-bottom: 4rpx solid rgb(221, 221, 221);
		}

		.user-state {
			width: 40rpx;
			height: 40rpx;
		}

		.localtion {
			font-size: 28rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.search-box {
			padding: 12rpx 20rpx;
			flex: 1;
			border-radius: 40rpx;
			// font-size: 28rpx;
			background-color: rgba(#fff, 0.1);

			.search-icon {
				width: 24rpx;
				height: 24rpx;

				&.right {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.online,
		.plus-icon {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.bg-box {
		height: 450rpx;
		width: 100%;
		background-color: $color-theme;
	}

	.main {
		padding-bottom: 40rpx;

		.border-bottom {
			border-bottom: 4rpx solid rgb(247, 247, 247);
		}

		.card {
			margin: 0 auto;
			width: 690rpx;
			height: 230rpx;
			background-image: url(/static/index/home_top_menu_bg.png);
			background-repeat: no-repeat;
			background-size: 100% auto;
			transform: translate3d(-50%, 0, 0);
			left: 50%;
			top: -115rpx;
			will-change: transform;
			border-radius: 20rpx;
			box-shadow: 0px 1px 3px 1px #ccc;
		}

		.menu {
			height: 530rpx;
			padding-top: 120rpx;
		}

		.notice {
			&__icon {
				width: 60rpx;
				height: 67rpx;
				flex-shrink: 0;
			}

			.new-icon {
				width: 72rpx;
				height: 33rpx;
				flex-shrink: 0;
			}

			font-size: 28rpx;
		}

		.ad {
			&__img {
				width: 670rpx;
				height: 220rpx;
				border-radius: 20rpx;
			}

			&__text {
				right: 40rpx;
				top: 16rpx;
				padding: 2rpx 8rpx;
			}
		}

		.content {
			margin-top: 50rpx;

			&__title {
				.line-title {
					font-size: 34rpx;
					font-weight: 500;

					.line-img {
						width: 8rpx;
						height: 36rpx;
						flex-shrink: 0;
						margin-right: 12rpx;
					}
				}

				.title-right {
					color: rgb(98, 98, 98);
					font-size: 30rpx;
				}
			}

			.licai {

				&-container {
					background-image: url(/static/index/market_recommend_bg.png);
					background-repeat: no-repeat;
					background-size: 100% auto;
					width: 100%;
					// height: 200rpx;

					.licai-top {
						padding: 60rpx 40rpx 20rpx;

						.title-img {
							top: 0;
							left: 20rpx;
							width: 145rpx;
							height: 40rpx;
						}

						.licai-content {
							font-weight: 500;

							.title {
								font-size: 30rpx;
							}

							.desc {
								font-size: 28rpx;
								color: rgb(93, 93, 93);
							}
						}

						.buy {
							background-image: url(/static/index/market_recommend_bt_bg.png);
							letter-spacing: 2rpx;
							width: 170rpx;
							height: 70rpx;
							font-weight: 500;
							font-size: 28rpx;
						}
					}

					.licai-bottom {
						background-color: rgb(255, 240, 219);
						color: rgb(175, 151, 115);
						font-size: 23rpx;
						padding: 4rpx 0;
					}
				}

			}

			.jijin {

				&__item {
					height: 320rpx;
					border-radius: 20rpx;
					width: calc((100vw - 80rpx) / 3);
					margin-right: 8rpx;

					&:nth-last-child(1) {
						margin-right: 0;
					}

					.title {
						font-size: 30rpx;
					}

					.type {
						color: rgb(234, 146, 49);
						font-size: 26rpx;
					}

					.nums {
						color: rgb(246, 72, 76);
						font-size: 40rpx;
						font-weight: 500;

						text {
							font-size: 24rpx;
						}
					}

					.zf {
						color: rgb(143, 143, 143);
					}
				}
			}

			.daikuan {

				&__item {
					height: 420rpx;
					border-radius: 20rpx;
					width: calc((100vw - 80rpx) / 3);
					margin-right: 8rpx;

					&:nth-last-child(1) {
						margin-right: 0;
					}

					.title {
						font-size: 30rpx;
					}

					.desc {
						word-break: break-all;

						.desc1,
						.desc2 {
							color: rgb(103, 103, 103);
							font-size: 26rpx;
						}

						.desc2 {
							color: rgb(148, 148, 148);
						}
					}



					.nums {
						color: rgb(246, 72, 76);
						font-size: 40rpx;
						font-weight: 500;
					}

					.zf {
						color: rgb(143, 143, 143);
					}
				}
			}
		}

		&__bottom {
			margin: 40rpx auto 0;
			font-size: 32rpx;
			border-radius: 40rpx;
			border: 2rpx solid $color-theme;
			width: 300rpx;
			padding: 10rpx 0;

			.add-icon {
				width: 28rpx;
				height: 28rpx;
				margin-right: 16rpx;
			}
		}
	}
</style>
